import React,{useEffect,useState} from 'react'
 import { Swiper , Image,ProductCard, Tag, Button} from 'react-vant';
import {useDispatch,useSelector} from "react-redux"
import {ALLLIST,APILIST,MYSTATE,ADDFN} from "../../../types/home.d"
import "../../../api/home"
import request from '../../../utils/request';
function HomeIndex() {
    const dispatch=useDispatch()
  let [arrdata,fn]=useState([])
  useEffect(()=>{
     request.get("/image").then(res=>{
       fn(res.data.image)
     })
  request.get("/list").then(res=>{
        dispatch({
          type:ALLLIST,
          payload:res.data.list
        })     
  })
},[])

let addFn=(item:any)=>{
  dispatch({
    type:ADDFN,
    payload:item
  })  
}

const datalist=useSelector((state:MYSTATE)=>{
     return state.datalist
})
  console.log(datalist);
  return (
    <div>
      <div className="demo-swiper">
       <Swiper>
        {arrdata.map((image,index) => (
          <Swiper.Item key={index}>
            <Image lazyload src={image} />
          </Swiper.Item>
        ))}
      </Swiper> 
    </div>
    <div className="box">
    {
    datalist&&datalist.map((item:APILIST,index:number)=>{
      return <ProductCard
      key={index}
      price={item.price}
      desc={item.title}
      title={item.name}
      thumb={item.img}
      tags={
        <>
          <Tag plain type="danger" style={{ marginRight: 5 }}>
            {item.id}
          </Tag>
          
        </>
      }
      footer={
        <>
          <Button size="mini" round plain style={{ marginRight: 2 }} onClick={()=>addFn(item)}>
           加入购物车
          </Button>
        </>
      }
    />
    })
    }

    

    </div>

    </div>
  )
}

export default HomeIndex
